<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>登记管理</cite></a>
    <a><cite>登记列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_registry_search">
        <script type="text/html" template lay-done="layui.data.done()">
          {{# let query = layui.router().search; }}
          <div class="layui-inline">
            <div class="layui-form-label">关键字</div>
            <div class="layui-input-inline" style="width: 160px">
              <input type="text" name="keyword" value="{{ decodeURIComponent(query.keyword || '') }}"
                     class="layui-input"
                     placeholder="作品名称或登记ID">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">创建人</div>
            <div class="layui-input-inline" style="width: 100px">
              <input type="text" name="mobile" value="{{ decodeURIComponent(query.user || '') }}" class="layui-input"
                     placeholder="创建人手机号">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">登记时间</div>
            <div class="layui-input-inline" style="width: 100px">
              <input type="text" name="start_date" class="layui-input" id="start_date"
                     value="{{ query.start_date || '' }}" placeholder="起始时间" autocomplete="off">
            </div>
            <div class="layui-inline"> ~</div>
            <div class="layui-input-inline" style="width: 100px">
              <input type="text" name="end_date" class="layui-input" id="end_date"
                     value="{{ query.end_date || '' }}" placeholder="截止时间" autocomplete="off">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">状态</div>
            <div class="layui-input-inline" style="width: 120px">
              <select name="status">
                <option value="">全部</option>
                <option value="not_pay">未支付</option>
                <option value="submitted">已提交</option>
                <option value="submit_fail">提交失败</option>
                <option value="pass">审核通过</option>
                <option value="rejected">审核拒绝</option>
              </select>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_registry_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_registry_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_registry"></div>
      <script type="text/html" id="tpl_user">
        {{d.user.mobile}}
        {{# if (d.user.auth) { }}
        ({{d.user.auth.real_name}})
        {{# } }}
      </script>
      <script type="text/html" id="tpl_status">
        {{d.status.description}}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-event="detail">
          查看详情
        </a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
    layui.use(['fox_table', 'laydate'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , admin = layui.admin
        , form = layui.form
        , view = layui.view
        , laydate = layui.laydate

      $('select[name="status"]').val(layui.router().search.status)
      form.render()

      laydate.render({
        elem: '#start_date'
        , max: (new Date()).toDateString()
      });
      laydate.render({
        elem: '#end_date'
        , max: (new Date()).toDateString()
      });

      let resourceUrl = 'agent-admin/registries'

      // 列表查询
      fox_table.render({
        id: 'table_registry'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 80, align: "center"}
          , {title: '创建人', templet: '#tpl_user', width: 200}
          , {title: '作品名称', field: 'product_name', minWidth: 100}
          , {title: '登记ID', field: 'register_id', width: 180}
          , {title: '费用', field: 'display_pay_amount', width: 90, align: "center"}
          , {title: '提交时间', field: 'created_at', width: 180, align: "center"}
          , {title: '状态', templet: '#tpl_status', width: 100, align: "center"}
          , {title: '操作', width: 100, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });

      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
        if (obj.event === 'detail') {
          showDetail(data.id)
        }
        if (obj.event === 'del') {
          layer.confirm('确认删除该数据?', function (index) {
            admin.del(resourceUrl, data.id, function (res) {
              layer.close(index);
              fox_table.reload(); //重载表格
            })
          });
        }
      });

      //搜索
      form.on('submit(submit_registry_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_registry_search)', function (d) {
        $("input[name='keyword']").val('');
        $("input[name='user']").val('');
        $("input[name='start_date']").val('');
        $("input[name='end_date']").val('');
        $("select[name='status']").val('');
        form.render();
        fox_table.reload({});
        return false;
      });

      function showDetail(id) {
        let minWidth = '800px';
        let minHeight = '1000px';
        admin.popup({
          title: '登记详情'
          , area: [minWidth, minHeight]
          , id: 'popup_registry'
          , success: function (layero, index) {
            view(this.id).render('/registry/detail', {id: id}).done(function () {
            })
          }
        })
      }
    })
  }
</script>

